<template>
  <view class="home">
    <view class="top">
      <view class="topLeft">
        <span class="iconfont icon-yaoqing"></span>
        <span class="font">邀好友</span>
      </view>
      <view class="topRig">
        <span class="iconfont icon-search search"></span>
        <input type="text" placeholder="搜索你想要的内容/主播/商品">
      </view>
    </view>
    <view class="tab">
      <view class="attention" @tap="handleTab('我的关注')"
            :style="{color:tab==='我的关注'?'#fadb14':''}">
        我的关注 <span v-if="tab === '我的关注'"></span>
      </view>
      <view class="invite" @tap="handleTab('我的邀请')"
            :style="{color:tab==='我的邀请'?'#fadb14':''}">
        我的邀请 <span v-if="tab === '我的邀请'"></span>
      </view>
    </view>
    <view class="swiperContent">
      <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
        <swiper-item>
          <view class="swiper-item">
            <image src="../../static/img2.jpg"></image>
          </view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item">
            <image src="../../static/img1.webp"></image>
          </view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item">
            <image src="../../static/img3.webp"></image>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="tip">
      <view class="tipDesc">
        <span class="icon-message iconfont message"></span>
        您关注的主播001正在直播中！！！
        <span class="color">3千</span>人观看中
      </view>
      <view class="btn">
        查看
      </view>


    </view>
    <view class="start">
      <view class="hu">
        <span class="iconfont icon-hu myhu"> </span>
      </view>
      <view class="starDesc">
        <p class="title">明星狐直播</p>
        <p class="textTip">关注明星狐直播，主播动态随时了解！</p>
      </view>
      <view class="starBrn">关注</view>
    </view>
    <view class="list">
      <view class="item">星狐价值观>
       <span class="icon-star iconfont"></span>
      </view>
      <view class="item">星狐用户规范>
        <span class="icon-lianjie iconfont"></span></view>
      <view class="item">新人上手指南>
        <span class="icon-book iconfont"></span></view>

    </view>
    <view class="dataList">
      <view class="dataItem" v-for="(item,index) in dataList">
        <view class="imgCont">
          <image :src="item.image" class="img"></image>
        </view>
        <p class="info">
          <span class="state">预告</span>
          <span class="title">今天晚上18：00准时开播</span>
        </p>
        <view class="userInfo">
          <view class="userHead">
            <image :src="item.image"></image>
          </view>
          <view class="userDesc">
            <p class="company">{{item.name}}</p>
            <p class="followed">已关注</p>
          </view>
        </view>
      </view>


    </view>

  </view>
</template>
<script>
  export default {
    data(){
      return{
        tab:'我的关注',
        background: ['color1', 'color2', 'color3'],
        indicatorDots: true,
        autoplay: false,
        interval: 3000,
        duration: 700,
        dataList: [
        {image:'../../static/图层%2020.png',
          name:'红狐集团'
        },
        {image:'../../static/图层%2021.png',
          name:'红狐集团'},
        {image:'../../static/item1.jpg',
          name:'红狐集团'},
        {image:'../../static/item1.jpg',
          name:'红狐集团'},
        {image:'../../static/图层%2020.png',
          name:'红狐集团'},
        {image:'../../static/item2.jpg',
          name:'红狐集团子'},
        {image:'../../static/图层%2020.png',
          name:'红狐集团'},
        {image:'../../static/item1.jpg',
          name:'红狐集团'},
        {image:'../../static/图层%2020.png',
          name:'红狐集团'},
        {image:'../../static/item1.jpg',
          name:'红狐集团'}
      ],


      }
    },
    methods:{
      handleTab(type){
        this.tab = type
      }
    }
  }
</script>
<style lang="scss">
  page{
    background: #f1f1f1;
  }
  .home{
    .top{
      height:100rpx;
      background: #fff;
      padding: 15rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      border: 1rpx solid #d6d7de;
      .topLeft{
        display: flex;
        flex-flow: column;
        align-items: center;
        .font{
          font-size: 24rpx;
        }
      }
      .topRig{
        display: flex;
        position: relative;
        .search{
          position: absolute;
          left: 35rpx;
          top: 15rpx;
          color:#fadb14 ;
        }
        input{
          background: #f1f1f1;
          height: 70rpx;
          line-height: 70rpx;
          border-radius: 20px;
          margin-left: 15rpx;
          width: 625rpx;
          padding:  0 70rpx;
          box-sizing: border-box;
        }
      }
    }
    .tab{
      height: 70rpx;
      line-height: 70rpx;
      font-size: 28rpx;
      padding: 0 100rpx;
      display: flex;
      background: #fff;
      color: #444;
      justify-content: space-around;
      .attention,.invite{
        position: relative;
        span{
          position: absolute;
          display: inline-block;
          top: 68rpx;
          width: 50rpx;
          height: 2px;
          background: #fadb14;
          left: 28rpx;


        }
      }


    }
    .swiperContent{
      padding: 10rpx 20rpx;
      .swiper{
        .swiper-item{
          width: 710rpx;
          height: 300rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 20rpx;
          overflow: hidden;
          margin-bottom: 10rpx;

          image{
            width: 710rpx;
          }
        }
      }
    }
    .tip{
      padding: 0 20rpx;
      margin: 0 20rpx;
      height: 44rpx;
      background: #fff;
      display: flex;
      align-items: center;
      font-size: 24rpx;
      line-height: 44rpx;
      border-radius: 10rpx;
      .message{
        font-size: 25rpx;
        color: #E74246;
      }
      .color{
        color:#fadb14;
      }
      .tipDesc{
        flex: 1;
      }
      .btn{
        height: 30rpx;
        line-height: 30rpx;
        width: 75rpx;
        text-align: center;
        border: 1px solid #fadb14;
        color: #fadb14;
        border-radius: 10rpx;
      }
    }
    .start{
      display: flex;
      align-items: center;
      height: 88rpx;
      padding: 15rpx 20rpx ;
      margin: 10rpx 20rpx;
      font-size: 28rpx;
      background: #fff;
      .hu{
        width: 70rpx;
        height: 70rpx;
        border-radius: 50%;
        background: #f1f1f1;
        text-align: center;
        line-height: 70rpx;
        margin-right: 15rpx;
        .myhu{
          margin: 0;
          color: #E74246;
        }
      }
      .starDesc{
        flex: 1;
        .title{
          font-weight: 700;
          color: #444;
        }
        .textTip{
          font-size: 24rpx;
          color: #444;
        }
      }
      .starBrn{
        width: 75rpx;
        height: 40rpx;
        border: 1px solid #4cd964;
        color: #4cd964;
        text-align: center;
        line-height: 40rpx;
        border-radius: 15rpx;
      }
    }
    .list{
      display: flex;
      padding: 0 20rpx;
      justify-content: space-between;
      .item{
        padding: 0 10rpx;
        background: #fff;
        font-size: 28rpx;
        color: #666;
        border-radius: 10rpx;
        span{
          font-size: 34rpx;
          font-weight: bold;
          color: #D66B50;
        }

      }
    }
    .dataList{
      padding: 20rpx;
      display: flex;
      justify-content: space-between;
      flex-flow: row wrap;
      .dataItem{
        width: 345rpx;
        height: 440rpx;
        background: #fff;
        position: relative;
        display: flex;
        flex-flow: column;
        margin-bottom: 10rpx;
        .imgCont{
          width: 100%;
          height: 340rpx;
          background: #6c6c6c;
          display: flex;
          justify-content: center;
          align-items: center;
          .img{
            height: 340rpx;

          }
        }
        .info{
          position: absolute;
          font-size: 24rpx;
          top: 300rpx;
          left: 0;
          color: #fff;
          padding: 0 15rpx;
          /*background: #6c6c6c;*/
          /*opacity: .6;*/
        }
        .userInfo{
          display: flex;
          padding: 10rpx;
          align-items: center;
          .userHead{
            width: 60rpx;
            height: 60rpx;
            border-radius: 50%;
            background: #4cd964;
            margin-right: 30rpx;
            image{
              width: 60rpx;
              height: 60rpx;
            }
          }
          .userDesc{
            .company{
              font-size: 28rpx;
              color: #666;
              font-weight: bold;
            }
            .followed{
              font-size: 24rpx;
              width: 90rpx;
              height: 35rpx;
              line-height: 35rpx;
              background: #fadb14;
              color: #fff;
              text-align: center;
              border: 1px solid #fadb14;
              border-radius: 20rpx;
            }
          }
        }

      }
    }
  }


</style>
